<template>
  <header class="h-16 bg-white dark:bg-neutral-800 shadow-sm flex items-center justify-between px-6 border-b border-neutral-200 dark:border-neutral-700">
    <!-- 左侧：折叠按钮 -->
    <button 
      @click="$emit('toggleSidebar')"
      class="w-10 h-10 flex items-center justify-center rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-700 transition-colors"
    >
      <i class="fas fa-bars text-neutral-600 dark:text-neutral-300"></i>
    </button>

    <!-- 右侧：工具栏 -->
    <div class="flex items-center gap-4">
      <!-- 主题切换 -->
      <button
        @click="$emit('toggleTheme')"
        class="w-10 h-10 flex items-center justify-center rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-700 transition-all"
        :title="isDark ? '切换到浅色模式' : '切换到深色模式'"
      >
        <transition name="fade" mode="out-in">
          <i v-if="isDark" class="fas fa-sun text-yellow-400"></i>
          <i v-else class="fas fa-moon text-neutral-600"></i>
        </transition>
      </button>

      <!-- 个人空间 -->
      <el-dropdown trigger="click">
        <div class="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-700 cursor-pointer transition-all">
          <div class="w-8 h-8 rounded-full bg-primary-500 flex items-center justify-center text-white text-sm font-medium">
            周
          </div>
          <span class="text-sm text-neutral-800 dark:text-neutral-200">个人空间</span>
          <i class="fas fa-chevron-down text-xs text-neutral-500"></i>
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="goToProfile">
              <i class="fas fa-user mr-2"></i>个人档案
            </el-dropdown-item>
            <el-dropdown-item @click="handleLogout" divided>
              <i class="fas fa-sign-out-alt mr-2"></i>退出登录
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </header>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

defineProps({
  isDark: Boolean
})

defineEmits(['toggleSidebar', 'toggleTheme'])

const router = useRouter()

const goToProfile = () => {
  router.push('/users/profile')
}

const handleLogout = () => {
  ElMessage.success('退出登录成功')
  // 这里可以添加实际的登出逻辑
}
</script>

